<template>
  <view>
    <map
      :longitude="longitude"
      :latitude="latitude"
      :scale="scale"
      :min-scale="minScale"
      :max-scale="maxScale"
      :markers="markers"
      :polyline="polyline"
      :circles="circles"
      :controls="controls"
      :show-compass="showCompass"
      :enable-zoom="enableZoom"
      :enable-scroll="enableScroll"
      :enable-rotate="enableRotate"
      :enable-overlooking="enableOverlooking"
      :enable-satellite="enableSatellite"
      :enable-traffic="enableTraffic"
      :show-location="showLocation"
      style="width: 750rpx; height: 100vh"
    />
    <!-- <view class="btn">
      <view class="button" @click="handleNav">导航</view>
    </view> -->
  </view>
</template>
<script>
export default {
  data() {
    return {
      longitude: 0, // 经度
      latitude: 0, // 维度
      scale: 16, // 缩放级别 取值范围为3-20
      minScale: 3, // 最小缩放级别
      maxScale: 20, // 最大缩放级别
      markers: [], // 标记点
      polyline: [], // 路线
      circles: [], // 圆
      controls: [], // 控件
      showCompass: false, // 是否显示指南针
      enableZoom: true, // 是否支持缩放
      enableScroll: true, // 是否支持拖动
      enableRotate: false, // 是否支持旋转
      enableOverlooking: false, // 是否开启俯视
      enableSatellite: false, // 是否开启卫星图
      enableTraffic: false, // 是否开启实时路况
      showLocation: false, // 显示带有方向的当前定位点
    };
  },
  onLoad(e) {
    this.longitude = parseFloat(e.lng);
    this.latitude = parseFloat(e.lat);
    this.initMap(e);
  },
  methods: {
    // 初始化标记点
    initMap(e) {
      // 获取自己当前位置
      uni.getLocation({
        type: "gcj02",
        success: (res) => {
          const lat = res.latitude;
          const lng = res.longitude;
          console.log(lat, lng);
        },
        fail: (res) => {
          console.log(res, "获取失败");
        },
      });
      let mark = {
        id: this.markers.length + 1,
        latitude: parseFloat(e.lat),
        longitude: parseFloat(e.lng),
        iconPath: require("../../static/my/marker.png"),
        width: 20,
        height: 24,
      };
      this.markers.push(mark);
    },
    // 导航
    handleNav() {
      uni.openLocation({
        latitude: this.latitude,
        longitude: this.longitude,
        address: this.address,
        scale: 16,
        success: () => {
          console.log("success");
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.btn {
  position: fixed;
  background-color: #fff;
  box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
  height: 126rpx;
  padding: 20rpx;
  bottom: 0;
  left: 0;
  right: 0;
  .button {
    width: 100%;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    color: $active-color;
    font-size: 28rpx;
    background-color: #cee7e5;
    border-radius: 100rpx;
    &:active {
      background-color: #b9e4e1;
    }
  }
}
</style>
